<template>
  <div id="operation">
    <div class="container common-detail">
      <div id="printJS-form">
        <a-form-model
          ref="form"
          :model="form"
          :label-col="{span: 4}"
          :wrapper-col="{span: 14}"
        >
          <div class="info-title-wrap">
            <div class="info-title">基础信息</div>
            <a-button type="primary" v-if="type == 1" @click="isHttp?subminNumber():''">提交</a-button>
          </div>
          <div class="form-row">
              <a-form-model-item label="推送编号" class="form-col">
                <a-input
                  v-model="form.checkPushCode"
                  placeholder="请输入验收编号"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="NC入库单号" class="form-col">
                <a-input
                  v-model="form.ncPushNum"
                  placeholder="请输入项目名称"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="项目名称" class="form-col">
                <a-input
                  v-model="form.projectName"
                  placeholder="请输入订单流水"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="采购订单流水" class="form-col">
                <a-input
                  v-model="form.orderSn"
                  placeholder=""
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="供应商" class="form-col" prop="deliveryPeople">
                <a-input
                  v-model="form.supplierName"
                  placeholder="请输入供应商"
                  :disabled="true"
                />
              </a-form-model-item>
              <a-form-model-item label="适用部位" class="form-col">
                <a-input
                  v-model="form.usePosition"
                  placeholder="请输入适用部位"
                  :disabled="true"
                />
              </a-form-model-item>
              <!-- <a-form-model-item label="合同要求" class="form-col">
                满足
              </a-form-model-item> -->
          </div>
        </a-form-model>
        <div class="info-title">验收明细</div>
        <div style="max-height:300px;overflow: auto;">
          <DataTable
          style="margin-bottom: 20px;"
          rowKey="checkDetailId"
          :showConfig="false"
          :tableData="Data"
          :tableColumn="tableColumn"
        />
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Watch, Vue } from 'vue-property-decorator';
@Component
export default class purchaseDetails extends Vue {
  form: any = {};
  Data: any[] = [];
  type:any = 2
  isHttp:any = true
  get tableColumn () {
    return {
      materialsNum: {
        label: '材料编码',
        width: 120
      },
      materialsName: {
        label: '材料名称',
        width: 120
      },
      unit: {
        label: '单位',
        width: 150
      },
      pushCount: {
        label: '平台验收数量',
        width: 100
      },
      ncCount: {
        label: 'NC入库数量',
        width: 150
      },
      difCount: {
        label: '差异值',
        width: 150
      },
      altCount: {
        label: '调数值',
        // type: this.type==1 ? 'input' : 'null',
        width: 150
      }

    }
  }

  init () {
    const {type, id} = this.$route.query
    this.id = id
    this.type = type
    this.getDetail()
  }
  // 调数提交
  subminNumber () {
    this.isHttp = false
    const hide = this.$message.loading('提交中', 2);
    this.$api.checkdifDifAltFetch(this.form).then((res:any) => {
      this.$message.success('提交成功')
      setTimeout(() => {
        this.getDetail()
        this.isHttp = true
      }, 1000);
    }).catch(() => {
      this.isHttp = true
    })
  }
  getDetail () {
    this.$api.checkdifDetailFetch({checkPushId: this.id}).then(({ data }: any) => {
      this.form = data // 获取到订单信息
      this.form.projectName = data.orderList.projectName
      this.form.supplierName = data.orderList.supplierName
      this.form.usePosition = data.orderList.usePosition
      this.Data = data.checkPushDetailDifs // 采购清单
    })
  }
}
</script>
<style lang='scss' scoped>
.info-title-wrap{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.info-title{
  padding-top: 20px;

}
.pic-wrap{
  display: flex;
  flex-wrap: wrap;

}
.form-row {
  display: flex;
  flex-wrap: wrap;
  .form-col {
    width: 50%;
    flex-shrink: 0;
  }
}
.form-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  .btn {
    margin: 10px 10px 0 0;
  }
}
.img-item {
  width: 100px;
  height: 100px;
  margin: 0px 10px 10px 0;
}

.tableHeard,.tableContent{
  display: flex;
  div{
    width: 25%;
    text-align: center;
  }
}

</style>
